<template>
    <!-- #ifdef APP-NVUE -->
    <cell>
        <!-- #endif -->
        <view class="swipe-list-item" :ref="`swipe-list-item-${anchor}`" :anchor="`swipe-list-item-${anchor}`"
            @click="e => $emit('click', e)" :class="[`swipe-list-item-${anchor}`]">

            <view class="swipe-list-item__right">
                <slot name="button">
                    <view v-for="(item,index) in options" :key="index" class="swipe-list-item__right__button"
                        :ref="`swipe-list-item__right__button-${index}`" :style="[{
						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
					}]" @tap.stop="buttonClickHandler(item, index)">
                        <view class="swipe-list-item__right__button__wrapper" :style="[{
							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
						}, item.style]">
                            <u-icon v-if="item.icon" :name="item.icon"
                                :color="item.style && item.style.color ? item.style.color : '#ffffff'"
                                :size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
                                :customStyle="{
								marginRight: item.text ? '2px' : 0
							}"></u-icon>
                            <text v-if="item.text" class="swipe-list-item__right__button__wrapper__text u-line-1"
                                :style="[{
								color: item.style && item.style.color ? item.style.color : '#ffffff',
								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
							}]">{{ item.text }}</text>
                        </view>
                    </view>
                </slot>
            </view>
            <!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
            <view class="swipe-list-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
                @touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
                :change:size="wxs.sizeChange">
                <!-- #endif -->
                <!-- #ifdef APP-NVUE -->
                <view class="swipe-list-item__content" ref="swipe-list-item__content" @panstart="onTouchstart"
                    @tap="clickHandler">
                    <!-- #endif -->
                    <slot />
                </view>
            </view>

        </view>
        <!-- #ifdef APP-NVUE -->
    </cell>
    <!-- #endif -->
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
    // #ifdef APP-NVUE
    import nvue from './nvue.js';
    const dom = uni.requireNativePlugin('dom')
    // #endif
    // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
    import wxs from './wxs.js';
    // #endif
    import touch from '../../../node_modules/uview-ui/libs/mixin/touch.js'
    import props from './props.js';
    /**
     * List 列表
     * @description 该组件为高性能列表组件
     * @tutorial https://www.uviewui.com/components/list.html
     * @property {String | Number}	anchor	用于滚动到指定item
     * @example <swipe-list-ite v-for="(item, index) in indexList" :key="index" ></swipe-list-item>
     */
    export default {
        name: 'swipe-list-item',
        mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch],
        // #ifdef APP-NVUE
        mixins: [uni.$u.mpMixin, uni.$u.mixin, props, nvue, touch],
        // #endif
        // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
        mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch, wxs],
        // #endif
        data() {
            return {
                // 节点信息
                rect: {},
                index: 0,
                show: true,
                sys: uni.$u.sys(),
                // 按钮的尺寸信息
                size: {},
                // 父组件swipe-list的参数
                parentData: {
                    autoClose: true,
                },
                // 当前状态，open-打开，close-关闭
                status: 'close',
                // 右侧按钮内容
                options: [{
                    text: '编辑',
                    style: {
                        backgroundColor: '#3c9cff'
                    }
                }, {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }]
            }
        },
        computed: {
            wxsInit() {
                return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
            }
        },
        inject: ['swipeList'],
        watch: {
            // #ifndef APP-NVUE
            'swipeList.innerScrollTop'(n) {
                const preLoadScreen = this.swipeList.preLoadScreen
                const windowHeight = this.sys.windowHeight
                if (n <= windowHeight * preLoadScreen) {
                    this.parent.updateOffsetFromChild(0)
                } else if (this.rect.top <= n - windowHeight * preLoadScreen) {
                    this.parent.updateOffsetFromChild(this.rect.top)
                }
            },
            optionsType(val) {

                val == 1 ? this.options = [{
                    text: '编辑',
                    style: {
                        backgroundColor: '#007aff'
                    }
                }, {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }] : this.options = [{
                    text: '查看',
                    style: {
                        backgroundColor: '#007aff'
                    }
                }];
            },
            // #endif
            // 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
            wxsInit(newValue, oldValue) {
                this.querySwipeRect()
            }
        },
        created() {
            this.parent = {}
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                // 初始化数据
                this.updateParentData()
                // #ifndef APP-NVUE
                uni.$u.sleep().then(() => {
                    this.querySwipeRect()
                })
                // #endif
                this.index = this.parent.children.indexOf(this)
                this.resize()

            },
            updateParentData() {
                // 此方法在mixin中
                this.getParentData('swipe-list')
            },
            resize() {
                this.queryRect(`swipe-list-item-${this.anchor}`).then(size => {
                    const lastChild = this.parent.children[this.index - 1]
                    this.rect = size
                    const preLoadScreen = this.swipeList.preLoadScreen
                    const windowHeight = this.sys.windowHeight
                    // #ifndef APP-NVUE
                    if (lastChild) {
                        this.rect.top = lastChild.rect.top + lastChild.rect.height
                    }
                    if (size.top >= this.swipeList.innerScrollTop + (1 + preLoadScreen) * windowHeight) this
                        .show =
                        false
                    // #endif
                })
            },
            // 查询元素尺寸
            queryRect(el) {
                return new Promise(resolve => {
                    // #ifndef APP-NVUE
                    this.$uGetRect(`.${el}`).then(size => {
                        resolve(size)
                    })
                    // #endif

                    // #ifdef APP-NVUE
                    const ref = this.$refs[el]
                    dom.getComponentRect(ref, res => {
                        resolve(res.size)
                    })
                    // #endif
                })
            },
            // #ifndef APP-NVUE
            // 查询节点
            querySwipeRect() {
                this.$uGetRect('.swipe-list-item__right__button', true).then(buttons => {
                    this.size = {
                        buttons,
                        show: this.swipeShow,
                        disabled: this.disabled,
                        threshold: this.threshold,
                        duration: this.duration
                    }
                })
            },
            // #endif
            // 按钮被点击
            buttonClickHandler(item, index) {
                console.log(this.index);
                if (this.optionsType == 1) {
                    index == 0 ? this.$emit('onEdit', this.data[this.index]) : this.$emit('onDel', this.data[this
                        .index], res => {
                            this.data.splice(this.index, 1)
                        });
                } else {
                    this.$emit('onDetail', this.data[this.index]);
                }

            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/node_modules/uview-ui/libs/css/components.scss";

    .swipe-list-item {
        position: relative;
        overflow: hidden;
        /* #ifndef APP-NVUE || MP-WEIXIN */
        /* touch-action: none; */
        /* #endif */

        &__content {
            background-color: #FFFFFF;
            z-index: 10;
        }

        &__right {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            padding: 1px;
            @include flex;

            &__button {
                @include flex;
                justify-content: center;
                overflow: hidden;
                align-items: center;

                &__wrapper {
                    @include flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 15px;

                    &__text {
                        @include flex;
                        align-items: center;
                        color: #FFFFFF;
                        font-size: 15px;
                        text-align: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
</style>